<template>
  <div>
    <a-radio-group v-model:value="searchValue.order_status" button-style="solid" @change="onSearch" style="margin-bottom: 20px;">
        <a-radio-button value="">全部</a-radio-button>
        <a-radio-button value="0">待发货</a-radio-button>
        <a-radio-button value="1">待收货</a-radio-button>
        <a-radio-button value="2">已完成</a-radio-button>
      </a-radio-group>
    <div class="header-tool">
    
      <br>
      <a-input-search
        style="width: 300px; margin-right: 10px"
        v-model:value="searchValue.order_number"
        placeholder="请输入订单号"   @search="onSearch"
      />
      <a-input-search
        style="width: 300px; margin-right: 10px"
        v-model:value="searchValue.phone"
        placeholder="请输入手机号"   @search="onSearch"
      />
      <a-button
        style="margin-right: 20px"
        class="mr10"
        type="primary"
        enter-button
        @click="onSearch()"
      >
        搜索
      </a-button>

      <a-button
      class="mr10"
      type="primary"
      @click="reLoad()"
    >
      刷新
    </a-button>
    </div>
    <a-table
      :row-key="(record) => record.news_id"
      :rowSelection="{
        onChange: onSelectChange,

        selectedRowKeys: mapRows
      }"
      :columns="newColumns"
      :dataSource="activities"
      :pagination="
        isObject(pagination)
          ? {
              showQuickJumper: true,
              total: pagination.total,
              current: pagination.current,
              pageSize: pagination.pageSize,
              showTotal: (total) => `共计 ${pagination.total} 条`
            }
          : false
      "
        @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'address'">
          {{ record?.address?.consignee }} - {{ record?.address?.phone }}
          <br />
          {{ record?.address?.province }} {{ record?.address?.city }} {{ record?.address?.district }}
          {{ record?.address?.house }}
        </template>
        <template v-if="column.dataIndex === 'User'">
          <div style="    display: flex;
    align-items: center;">

         
          <img :src="record.User.avatar" style="width: 30px;height: 30px;border-radius:50% ;" />
        <span style="    margin-left: 10px;"> {{ record.User.user_name }}  </span>
      </div> 
      </template>
        <template v-if="column.dataIndex === 'good-image'">
          <div class="prodinfo">
            <img class="prodinfo-img"
            style=""
            :src="record?.Good?.goods_img"
          />
          <div> {{record?.Good?.goods_name}}</div>
          </div>
        
         
        </template>
       
        <template v-if="column.dataIndex === 'price'">
          {{ record?.Good?.price }}
        </template>
        <template v-if="column.dataIndex === 'order_status'">
          <a-tag
            color="pink"
            v-if="record.order_status == 0"
          >
            待发货
          </a-tag>
          <a-tag
            color="red"
            v-if="record.order_status == 1"
          >
            待收货
          </a-tag>
          <a-tag
            color="green"
            v-if="record.order_status == 2"
          >
            已完成
          </a-tag>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="orderDetail(record)">查看详情</a>
            <a-divider type="vertical" />
            <a
              @click="postSend(record)"
              v-if="record.order_status == 0"
            >
              发货
            </a>
            <a
              @click="postSend(record,'edit')"
              v-if="record.order_status > 0"
            >
            改物流单号
            </a>
            <a-divider type="vertical" />
            <!-- v-if="record.order_status == 1" -->
            <a
              @click="LogisticsEvent(record)"
              v-if="record.order_status > 0"
            >
              查看物流
            </a>
          </span>
        </template>
      </template>
    </a-table>
    <detail ref="orderDetailRef"></detail>
    <deliverGoods
      ref="deliverGoodsRef"
      @refuData="refuData"
    ></deliverGoods>
    <Logistics ref="LogisticsRef"></Logistics>
  </div>
</template>

<script setup>
  import deliverGoods from './../comm/deliverGoods.vue'
  import Logistics from './../comm/Logistics.vue'
  import { isObject } from 'lodash-es'
  import { message } from 'ant-design-vue'
  import detail from './detail.vue'
  import { ref, onMounted, reactive, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElButton, ElTable, ElTableColumn, ElDialog } from 'element-plus'

  import { orderList, raffleDel, raffleUpdate, rafflePoint } from '@/api/index'
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const LogisticsRef = ref(null)
  const deliverGoodsRef = ref(null)
  const activeKey = ref('1')
  const raffle = ref(null)
  const activities = ref([])
  const newColumns = [
    // {
    //   title: 'id',
    //   dataIndex: 'order_id'
    // },
    {
      title: '订单号',
      dataIndex: 'order_number',
      width: '80px',
    },
    {
      title: '用户信息',
      dataIndex: 'User',
      with:'200px'
    },
    {
      title: '收件人',
      dataIndex: 'address',
      
    },
    {
      title: '商品信息',
      dataIndex: 'good-image',
     
    },

   

    {
      title: '价格',
      dataIndex: 'price',
      width: '100px',
    },
    {
      title: '订单状态',
      dataIndex: 'order_status',
      width: '120px',
    },

    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
      width: '120px',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: '200px',
    }
  ]

  const mapRows = ref([])
  const orderDetailRef = ref(null)
   
  const onSelectChange = (selectedRowKeys, selectedRows) => {
    mapRows.value = selectedRowKeys
  }
  const postSend = (row,type) => {
    deliverGoodsRef.value.init(row, 'order',type)
  }
  const orderDetail = (row) => {
    orderDetailRef.value.init(row)
  }
  const LogisticsEvent = (row) => {
    LogisticsRef.value.init(row.tracking_number, row.address.phone)
  }
  const searchValue = ref({
    order_number:"",
    phone:"",
    order_status:""
  })
  const onSearch = () => {
    pagination.current = 1
    getList()
  }

  const getList = () => {
    orderList({
      page: pagination.current,
      order_number:searchValue.value.order_number,
      phone:searchValue.value.phone,
      order_status:searchValue.value.order_status,
      pageSize: pagination.pageSize
    })
      .then((res) => {
        if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
      res.data.map(val=>val.address=JSON.parse(val.address))
        activities.value = res.data

        if (res.data.length > 0) {
          raffle.value = res.data[0].point
        }
        pagination.total = res.total
      })
      .catch((err) => {
        message.error(err.msg)
      
      })
  }
  const reLoad = () => {
    pagination.current = 1
    getList()
  }
  getList()
  const handleTableChange = ({ current, pageSize }) => {
    
    pagination.current = current
    pagination.pageSize = pageSize
    getList()
  }
  
  const refuData = () => {
     
    getList()
  }

  
</script>

<style scoped>
  .header-tool {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
  }

  .header-tool button {
    margin-right: 5px;
  }
  .prodinfo{
    display: flex;
    align-items:center;
    justify-content: flex-start;
  }
  .prodinfo-img{
    width: 50px; height: 50px;
    margin-right: 10px
  }
</style>
